<template>
  <div class="tab-index">
    <div class="tab-index-son">
      <div class="head-index">
          <h2>配置精选</h2>
          <h3 @click="modal1Visible=true" style="color:#4169F4;margin-left:10px;">修改</h3>
      </div>
      <a-list bordered :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item">
          {{ item }}
        </a-list-item>
      </a-list>
    </div>
    <div class="tab-index-son">
      <div class="head-index">
          <h2>配置艺术家</h2>
          <h3 style="color:#4169F4;margin-left:10px;">修改</h3>
      </div>
      <a-list bordered :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item">
          {{ item }}
        </a-list-item>
      </a-list>
    </div>
    <div class="tab-index-son">
      <div class="head-index">
          <h2>配置作品集</h2>
          <h3 style="color:#4169F4;margin-left:10px;">修改</h3>
      </div>
      <a-list bordered :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item">
          {{ item }}
        </a-list-item>
      </a-list>
    </div>
    <div class="tab-index-son">
      <div class="head-index">
          <h2>配置摄影展</h2>
          <h3 style="color:#4169F4;margin-left:10px;">修改</h3>
      </div>
      <a-list bordered :data-source="data">
        <a-list-item slot="renderItem" slot-scope="item">
          {{ item }}
        </a-list-item>
      </a-list>
    </div>
    <a-modal
      title="配置精选"
      :dialog-style="{ top: '20px' }"
      :visible="modal1Visible"
      cancelText="取消"
      okText="确定"
      :width="1200"
      centered
      @ok="() => setModal1Visible(false)"
      @cancel="() => setModal1Visible(false)"
    >
     <indexModal/>
    </a-modal>
  </div>
</template>

<script>
import indexModal from './index-modal.vue'
export default {
    components:{
        indexModal
    },
  data() {
    return {
      modal1Visible: false,
      data: [
        "Racing car sprays burning fuel into crowd.",
        "Japanese princess to wed commoner.",
        "Australian walks 100km after outback crash.",
        "Man charged over missing wedding girl.",
        "Los Angeles battles huge wildfires.",
      ],
    };
  },
   methods: {
        setModal1Visible(modal1Visible) {
      this.modal1Visible = modal1Visible;
    }
    }
};
</script>

<style>
.tab-index {
  width: 100%;
  height: 100%;
  padding: 60px;
  text-align: left;
  overflow: scroll;
}
.tab-index-son {
  width: 60%;
  margin-bottom: 60px;
}
.head-index{
    display: flex;
    align-items: baseline;
}
</style>